<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card class="operatingrecord">
            <template #header>
                <div class="serchbox">
                    <div class="left">
                        <div class="item">
                            <el-input v-model="queryData.keyWords" class="serchs" @input="paginaClick(1)" placeholder="搜索用户名称、联系电话">
                                <template #suffix>
                                    <el-icon class="el-input__icon"><search /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <sxnfbtn @click="paginaClick(1)" color="#23b14d">搜索</sxnfbtn>
                        <!-- <el-button type="primary" text bg @click="paginaClick(1)">搜索</el-button> -->
                    </div>
                    <sxnfbtn @click="topages('/team/teammanagement/auditlist')" color="#23b14d">审核记录</sxnfbtn>
                    <!-- <el-button type="primary" text bg @click="topages('/team/teammanagement/auditlist')">审核记录</el-button> -->
                </div>
            </template>
            <el-table :data="pageData.list" style="width: 100%" border>
                <el-table-column prop="name" label="序号" width="50">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名称" width="220"></el-table-column>
                <el-table-column prop="phoneNum" label="联系电话" width="220"></el-table-column>
                <el-table-column prop="name" label="个人常驻地址">
                    <template #default="scope">
                        {{ scope.row.userAddressArea ? addrAnalysis(scope.row) : "" }}
                    </template>
                </el-table-column>
                <el-table-column prop="acceptInvitationTime" label="申请时间" width="220"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" link @click="topages(`/team/teammanagement/menbermsg/${scope.row.userId}`)">查看</el-button>
                        <el-button type="primary" size="small" link @click="auditMenbers(1, scope.row)">审核通过</el-button>
                        <el-button type="danger" size="small" link @click="auditMenbers(2, scope.row)">审核不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :totalNum="pageData.total" @paginaClick="paginaClick"></pagination>
        </el-card>

        <div class="submitsuccessfully" v-if="submitsuccessfully">
            <div class="contMsg">
                <div class="title">审核成员</div>
                <img src="../../../assets/images/success.png" alt="" srcset="" />
                <div class="success">
                    <span>为了您团队管理高效和安全，请谨慎审核成员！</span>
                </div>
                <div class="brnbox">
                    <sxnfbtn class="btnzdl" @click="nogetapproved">审核不通过</sxnfbtn>
                    <sxnfbtn class="btnzdl" @click="getapproved">审核通过</sxnfbtn>
                    <!-- <div class="btnzdl" @click="nogetapproved">审核不通过</div> -->
                    <!-- <div class="btnzdl" @click="getapproved">审核通过</div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive, computed, watch, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getAuditApplyList, auditSucceed, auditErrors } from "@/api/team";
import { ElMessage, ElMessageBox } from "element-plus";
import Sxnfbtn from "@/components/sxnfbtn.vue";
const router = useRouter();
const store = useStore();
const topages = (url: string) => {
    router.push(url);
};
// 监听头部公司选择框数据变化
// const selectCompany = computed({
//     get: () => {
//         return store.getters.mainTeamId;
//     },
//     set: (val) => {
//         console.log(val);
//     },
// });
// watch(
//     selectCompany,
//     (newVal, oldVal) => {
//         if (oldVal) {
//             // queryData.teamId = newVal;
//             getPageData();
//         }
//     },
//     { immediate: true, deep: true }
// );
const pageData: any = reactive({
    list: [],
    total: 0,
});
const queryData = reactive({
    pageNum: 1,
    pageSize: 10,
    keyWords: "",
    teamId: store.getters.mainTeamId,
});
const getPageData = () => {
    getAuditApplyList(queryData).then((res: any) => {
        pageData.list = res.data.list;
        pageData.total = res.data.total;
    });
};
getPageData();
const paginaClick = (val: number) => {
    queryData.pageNum = val;
    getPageData();
};

const addrAnalysis = (row: any) => {
    let addr = JSON.parse(row.userAddressArea);
    let text = `${addr.valueText}/${row.userAddress}`;
    return text;
};
const submitsuccessfully = ref(false);
const auditData = ref(null);
const auditMenbers = (type: number, row: any) => {
    auditData.value = row;
    if (type == 1) {
        // 通过
        submitsuccessfully.value = true;
    } else {
        // 不通过
        nogetapproved();
    }
};
// 通过
const getapproved = () => {
    const row: any = auditData.value;
    auditSucceed({
        id: row.id,
        teamId: row.teamId,
    }).then((res: any) => {
        ElMessage.success("审核成功");
        submitsuccessfully.value = false;
        updateGapeData();
    });
};
// 不通过
const nogetapproved = () => {
    const row: any = auditData.value;
    ElMessageBox.prompt("", "确定不通过该用户申请吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showInput: true,
        inputPlaceholder: "请输入拒绝理由",
    }).then(({ value }) => {
        auditErrors({
            id: row.id,
            teamId: row.teamId,
            disgreeReson: value,
        }).then((res: any) => {
            ElMessage.success("操作成功");
            submitsuccessfully.value = false;
            updateGapeData();
        });
    });
};
const updateGapeData = () => {
    if (queryData.pageNum > 1) {
        queryData.pageNum = pageData.list.length == 1 ? queryData.pageNum - 1 : queryData.pageNum;
    }
    getPageData();
};
</script>
<style scoped lang="scss">
.operatingrecord {
    .serchbox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .item {
                margin-right: 20px;
                color: #333333;
                font-size: 14px;
                .serchs {
                    width: 300px;
                }
            }
        }
    }
}
.submitsuccessfully {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(51, 51, 51, 0.1);
    z-index: 999;
    .contMsg {
        width: 435px;
        height: 327px;
        background: #ffffff;
        border-radius: 5px 5px 5px 5px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        .title {
            text-align: center;
            margin-top: 33px;
            font-weight: bold;
            font-size: 20px;
            color: #333333;
        }
        img {
            width: 50px;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 38px;
            margin-left: 5px;
        }
        .success {
            font-weight: normal;
            font-size: 16px;
            color: #333333;
            margin-top: 38px;
            text-align: center;
            span {
                color: #ff0000;
            }
        }
        .tipcg {
            font-size: 14px;
            color: #999999;
            text-align: center;
            margin-top: 16px;
            padding: 0;
        }
        .brnbox {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btnzdl {
            width: 100px;
            text-align: center;
            cursor: pointer;
            margin-top: 30px;
            color: #ffffff;
        }
    }
}
</style>
